<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="https://img61.ddimg.cn/upload_img/00555/touch/touch-icon-ipad.png">
    <link rel="stylesheet" href="./css/swiper-bundle-2.css">
    <link rel="stylesheet" href="./font/font2/iconfont.css">
    <link rel="stylesheet" href="./css/history-2.css">
    <title>历史馆</title>
</head>
<body>
    <div class="header">
        <a href="./index-1.html"><i class="iconfont icon-xiaoyuhao"></i></a>
        <span>历史馆</span>
        <p></p>
    </div>
    <div class="search">
        <div class="search-box">
            <span></span>
            <input type="text">
        </div>
    </div>
    <div class="swiper play1">
        <div class="swiper-wrapper">
            <div data-hash="slide1" class="swiper-slide">
                <img src="https://img62.ddimg.cn/2024/8/23/2024082319340151595.jpg" alt="">
            </div>
            <div data-hash="slide2" class="swiper-slide">
                <img src="https://img63.ddimg.cn/2024/7/23/2024072309540148881.jpg" alt="">
            </div>
            <div data-hash="slide3" class="swiper-slide">
                <img src="https://img63.ddimg.cn/2024/7/26/2024072620450631039.jpg" alt="">
            </div>
            <div data-hash="slide4" class="swiper-slide">
                <img src="https://img62.ddimg.cn/topic_img/gys_04514/zizhitongjianwenbai1242524.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="swiper play2">
        <div class="swiper-wrapper">
            <div data-hash="slide5" class="swiper-slide">
                <img src="https://img52.ddimg.cn/9009470361446682.jpg" alt="">
            </div>
            <div data-hash="slide6" class="swiper-slide">
                <img src="https://img62.ddimg.cn/topic_img/gys_0014426/taiwan750220.jpg" alt="">
            </div>
            <div data-hash="slide7" class="swiper-slide">
                <img src="https://img55.ddimg.cn/9003230347859345.jpg" alt="">
            </div>
            <div data-hash="slide8" class="swiper-slide">
                <img src="https://img60.ddimg.cn/topic_img/gys_0015115/20240826txgj750x220.jpg" alt="">
            </div>
            <div data-hash="slide9" class="swiper-slide">
                <img src="https://img63.ddimg.cn/topic_img/gys_0016329/ahls.jpg" alt="">
            </div>
            <div data-hash="slide10" class="swiper-slide">
                <img src="https://img52.ddimg.cn/9006620428646722.jpg" alt="">
            </div>     
            <div data-hash="slide11" class="swiper-slide">
                <img src="https://img63.ddimg.cn/topic_img/gys_0016310/wq750x220.jpg" alt="">
            </div>
            <div data-hash="slide12" class="swiper-slide">
                <img src="https://img57.ddimg.cn/9005990373275777.jpg" alt="">
            </div>
            <div data-hash="slide13" class="swiper-slide">
                <img src="https://img61.ddimg.cn/topic_img/gys_0016342/wynlqn750X230.jpg" alt="">
            </div>
            <div data-hash="slide14" class="swiper-slide">
                <img src="https://img61.ddimg.cn/topic_img/gys_0014951/rgzsss750x220.jpg" alt="">
            </div>
            <div data-hash="slide15" class="swiper-slide">
                <img src="https://img57.ddimg.cn/9005240359867607.jpg" alt="">
            </div>
            <div data-hash="slide16" class="swiper-slide">
                <img src="https://img51.ddimg.cn/9002810629126251.jpg" alt="">
            </div>
        </div>
        <!-- <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div> -->
        <div class="swiper-pagination"></div>
    </div>
    <div class="book-navs">
        <img src="https://img62.ddimg.cn/upload_img/00759/xin/iCON-changxiaobang-1553736053.jpg" alt="">
        <img src="https://img61.ddimg.cn/upload_img/00759/xin/iCON-xinshubang-1553736076.jpg" alt="">
        <img src="https://img60.ddimg.cn/upload_img/00759/xin/iCON-jinricuxiao-1553736098.jpg" alt="">
        <img src="https://img63.ddimg.cn/upload_img/00759/xin/iCON-pintuan-1553736114.jpg" alt="">
        <img src="https://img63.ddimg.cn/upload_img/00759/xin/iCON-disnzishu-1553736134.jpg" alt="">
    </div>
    <div class="app-line"></div>
    <div class="floor">
        <div class="floor-nav">
            <div class="nav1">
                <a href="">历史</a>
            </div>
            <div class="nav2">
                <a href="">历史普及</a>
            </div>
            <div class="nav2">
                <a href="">世界史</a>
            </div>
            <div class="nav2">
                <a href="">中国史</a>
            </div>
            <div class="nav2">
                <a href="">史家名著</a>
            </div>
        </div>
        <div class="floor-nav">
            <div class="nav2">
                <a href="">历史随笔</a>
            </div>
            <div class="nav2">
                <a href="">史学理论</a>
            </div>
            <div class="nav2">
                <a href="">地方史志</a>
            </div>
            <div class="nav2">
                <a href="">文物考古</a>
            </div>
            <div class="nav2">
                <a href="">逸闻野史</a>
            </div>
        </div>
        <div class="floor-nav">
            <div class="nav2">
                <a href="">史料典籍</a>
            </div>
            <div class="nav2">
                <a href="">历史地理</a>
            </div>
            <div class="nav2">
                <a href="">民族史</a>
            </div>
            <div class="nav2">
                <a href="">专业史</a>
            </div>
            <div class="nav2">
                <a href="">口述史</a>
            </div>
        </div>
    </div>
    <div class="swiper play3">
        <div class="swiper-wrapper">
            <div data-hash="slide17" class="swiper-slide">
                <img src="https://img63.ddimg.cn/topic_img/gys_0014598/zhanhuo750x220.jpg" alt="">
            </div>
            <div data-hash="slide18" class="swiper-slide">
                <img src="https://img52.ddimg.cn/9009470315637212.jpg" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <img class="new-book" src="https://img62.ddimg.cn/upload_img/00713/pictrue/zhubiantuijian.jpg" alt="">
    <div class="content-block">
        <div class="items" id="carousel">

        </div>
    </div>
    <div class="content-block">
        <div class="items" id="carousel1">
            
        </div>
    </div>
    <div class="guess">
        <div class="hand">
            <p><span class="active" onclick="handoff()">分类</span></p>
            <p><span onclick="handoff()">新书榜</span></p>
            <p><span onclick="handoff()">畅销榜</span></p>
            <p><span onclick="handoff()">飙升榜</span></p>
            <p><span onclick="handoff()">五星榜</span></p>
        </div>
    </div>
    <div class="guess-like">
        <div class="more">
            <p>查看更多</p>
        </div>
        <img class="new-book" src="https://img60.ddimg.cn/upload_img/00796/1/9-1561114778.png" alt="">
        <div class="more">
            <p>查看更多</p>
        </div>
        <div class="bottom">
            <div>
                <img src="./image/icon_smile-2.png" alt="">
                <p>到底了，再拉裤子都掉啦</p>
            </div>
        </div>
    </div>
    <div class="app-bottom">
        <img src="https://img63.ddimg.cn/upload_img/00678/zsts/ICON_01_ddsc.jpg" alt="">
        <img src="https://img63.ddimg.cn/upload_img/00678/zsts/ICON_02.jpg" alt="">
        <img src="https://img62.ddimg.cn/upload_img/00678/zsts/ICON_03.jpg" alt="">
        <img src="https://img61.ddimg.cn/upload_img/00678/zsts/ICON_04.jpg" alt="">
        <img src="https://img62.ddimg.cn/upload_img/00678/zsts/ICON_05.jpg" alt="">
    </div>



</body>
<!-- 1 -->
<script>
    var carousel = document.querySelector('#carousel')
    fetch('https://z.dangdang.com/touchm/h5ajaxZ.php?action=mix_data&page_id=811048_37491116_793930_53754710&user_client=touch&deviceType=&udid=bca3a20681d945a34469981a82ac5d54&permanent_id=20240813195323061159417209067464662&client_version=1.0&app_id=touch&h5_server=1&ddcode=bb52514f383e75d7014d582ac45aed91').then(res => res.json()).then(res1 => {
        // console.log(res1)
        // console.log(res1.ret[5].content.value)
        // 5
        for(var i=0; i<res1.ret[1].content.value.length; i++){
            carousel.innerHTML+=`
        <div>
            <img src="${res1.ret[1].content.value[i].img_url}" alt="">
            <p>${res1.ret[1].content.value[i].product_name}</p>
            <div>
                <span>￥</span>
                <span>${parseInt(res1.ret[1].content.value[i].sale_price)}.</span>
                <span class='float'>${((res1.ret[1].content.value[i].sale_price)%1)!==0?((res1.ret[1].content.value[i].sale_price)%1).toFixed(1)*100:'00'}</span>
                <span class="${res1.ret[1].content.value[i].product_tags.length>0?'label':'none'}">
                    ${res1.ret[1].content.value[i].product_tags.length>0?res1.ret[1].content.value[i].product_tags[0].name:''}
                </span>
            </div>
            <p class='${res1.ret[1].content.value[i].ebook_price==''?'none':'edition'}'>
                <span class='${res1.ret[1].content.value[i].ebook_price==''?'none':' '}'>电子书版</span>
                <span class='${res1.ret[1].content.value[i].ebook_price==''?'none':' '}'>￥${res1.ret[1].content.value[i].ebook_price==''?'':res1.ret[1].content.value[i].ebook_price}</span>
            </p>
        </div>
            `
        }

        // 6
        var carousel1 = document.querySelector('#carousel1')
        for(var i=0; i<res1.ret[2].content.value.length; i++){
            carousel1.innerHTML+=`
        <div>
            <img src="${res1.ret[2].content.value[i].img_url}" alt="">
            <p>${res1.ret[2].content.value[i].product_name}</p>
            <div>
                <span>￥</span>
                <span>${parseInt(res1.ret[2].content.value[i].sale_price)}.</span>
                <span class='float'>${((res1.ret[2].content.value[i].sale_price)%1)!==0?((res1.ret[2].content.value[i].sale_price)%1).toFixed(2)*100:'00'}</span>
                <span class="${res1.ret[2].content.value[i].product_tags.length>0?'label':'none'}">
                    ${res1.ret[2].content.value[i].product_tags.length>0?res1.ret[2].content.value[i].product_tags[0].name:''}
                </span>
            </div>
            <p class='${res1.ret[2].content.value[i].ebook_price==''?'none':'edition'}'>
                <span class='${res1.ret[2].content.value[i].ebook_price==''?'none':' '}'>电子书版</span>
                <span class='${res1.ret[2].content.value[i].ebook_price==''?'none':' '}'>￥${res1.ret[2].content.value[i].ebook_price==''?'':res1.ret[2].content.value[i].ebook_price}</span>
            </p>
        </div>
            `
        }
    })
</script>


<!-- 点击切换 -->
<script>
    var hand = document.querySelectorAll('.hand p span')
    var active1 = document.querySelector('.active1')
handoff=function(){
    for(var i=0; i<hand.length; i++){
        hand[i].classList.remove('active')
    }
    event.target.classList.add('active')
}
</script>

<script src="./js/reset-2.js"></script>
<!-- Swiper JS -->
<script src="./js/swiper-bundle-2.js"></script>
<script>
    var swiper = new Swiper(".play1", {
        autoplay: true,//等同于以下设置
        loop:true,
        autoplay: {
            delay: 2000,
            stopOnLastSlide: true,
            disableOnInteraction: false,
        },
        spaceBetween: 0,
        hashNavigation: {
            watchState: true,
        },
        pagination: {
            el: ".play1 .swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".play1 .swiper-button-next",
            prevEl: ".play1 .swiper-button-prev",
        },
    });
    var swiper = new Swiper(".play2", {
        autoplay: true,//等同于以下设置
        loop:true,
        autoplay: {
            delay: 2000,
            stopOnLastSlide: true,
            disableOnInteraction: false,
        },
        spaceBetween: 0,
        hashNavigation: {
            watchState: true,
        },
        pagination: {
            el: ".play2 .swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".play2 .swiper-button-next",
            prevEl: ".play2 .swiper-button-prev",
        },
    });
    var swiper = new Swiper(".play3", {
        autoplay: true,//等同于以下设置
        loop:true,
        autoplay: {
            delay: 2000,
            stopOnLastSlide: true,
            disableOnInteraction: false,
        },
        spaceBetween: 0,
        hashNavigation: {
            watchState: true,
        },
        pagination: {
            el: ".play3 .swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".play3 .swiper-button-next",
            prevEl: ".play3 .swiper-button-prev",
        },
    });
</script>

</html>